<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" >

    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left">
                <comps:miPanel />
            </ui:define>

            <ui:define name="principal">
                <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
                <p:dialog modal="true" widgetVar="statusDialog" header="Espere por favor..." 
                          draggable="false" closable="false" resizable="false" >
                    <p:graphicImage value="#{resource['images:ajaxLoadingBar.gif']}" />
                </p:dialog>

                <div style="margin: 0 20px; text-align: center" >
                <h:form>
                    <h1>Destacar Publicación</h1>
                    <p style="text-align: left">
                        De hacerlo, la misma aparecerá antes que otras publicaciones no destacadas, y de
                        esta forma usted está incrementando las posibilidades de que su producto sea alquilado.
                    </p>

                    <div id="items" >
                        <comps:itemInfo bean="#{destacarBean}" property="publicacionId" 
                                        var="#{destacarBean.publicacion}" />
                    </div>
                    <br/>
                    <h:panelGrid id="inputs" columns="3" cellpadding="4" style="text-align: left" >
                        <h:outputLabel value="Duración:" />
                        <h:selectOneMenu value="#{destacarBean.tipoSeleccionado}"
                                         id="duracion" required="true"
                                         requiredMessage="Valor requerido" >
                            <f:selectItem itemLabel="Seleccione una duracion..." />
                            <f:selectItems value="#{destacarBean.tipos}" />
                            <p:ajax event="change" listener="#{destacarBean.tipoSeleccionado}"
                                    update="precio botones" />
                        </h:selectOneMenu>
                        <p:message for="duracion" />
                        
                        <h:outputLabel value="Precio:" />
                        <p:outputPanel id="precio" >
                            <h:outputText value="$ #{destacarBean.precio}" style="font-size: 12px"
                                          rendered="#{not empty destacarBean.tipoSeleccionado}" />
                            <h:outputText value="-" style="font-size: 12px"
                                          rendered="#{empty destacarBean.tipoSeleccionado}" />
                        </p:outputPanel>
                    </h:panelGrid>

                    <h:panelGrid columns="4" id="botones" columnClasses="leftCol,rightCol" width="100%"
                                 style="margin-top: 10px" >
                        <ui:remove>
                        <p:commandLink id="pagoYa" title="Destacar ya!" action="#{destacarBean.destacarInmediatamente}" 
                                       ajax="false" disabled="#{empty destacarBean.tipoSeleccionado}"
                                       onclick="window.open('paypal.png')" style="margin: 0 10px" >
                            <h:graphicImage value="#{resource['images:pagarAhora.gif']}" />
                        </p:commandLink>
                        <p:commandLink id="pagoDm" actionListener="#{destacarBean.destacarDm}" 
                                       update=":dm growl" oncomplete="submitForm(xhr, status, args)"
                                       disabled="#{empty destacarBean.tipoSeleccionado}" style="margin: 0 10px" >
                            <h:graphicImage value="#{resource['images:pagoDineroMail.gif']}" />
                        </p:commandLink>
                        <p:commandLink id="pagoPaypal" actionListener="#{destacarBean.destacar}" 
                                       disabled="#{empty destacarBean.tipoSeleccionado}" style="margin: 0 10px" >
                            <h:graphicImage value="#{resource['images:pagoPaypal.gif']}" />
                        </p:commandLink>
                        </ui:remove>
                        <p:commandButton value="Aceptar" oncomplete="if(args &amp;&amp; !args.validationFailed) metodoPagoDlg.show()"
                                         update="@form" disabled="#{empty destacarBean.tipoSeleccionado}" />
                        <p:button value="No, gracias" outcome="/vistas/usuario/articulos" />
                    </h:panelGrid>

                    <p:growl id="growl" globalOnly="true" />

                    <p:dialog widgetVar="metodoPagoDlg" header="Seleccione método de pago" modal="true" resizable="false" >
                            <ui:remove>
                                <p:commandLink title="Paypal" actionListener="#{destacarBean.destacar}" 
                                               styleClass="btnMetodoPago" >
                                    <h:graphicImage value="#{resource['images:botonPaypal.jpg']}" />
                                </p:commandLink>
                            </ui:remove>
                            <a href="http://www.mercadopago.com.ar" title="Mercado pago"
                               class="btnMetodoPago" >
                                <h:graphicImage value="#{resource['images:boton-mercadopago.jpg']}" height="114" />
                            </a>
                            <p:commandLink title="DineroMail" actionListener="#{destacarBean.destacarDm}" 
                                           update=":dm growl" oncomplete="submitForm(xhr, status, args)"
                                           styleClass="btnMetodoPago" >
                                <h:graphicImage value="#{resource['images:botonDineromail.jpg']}" />
                            </p:commandLink>
                            <p:commandLink title="DineroMail Inmediato" action="#{destacarBean.destacarInmediatamente}" 
                                           ajax="false" onclick="window.open('pago-dineromail.png')"
                                           styleClass="btnMetodoPago">
                                <h:graphicImage value="#{resource['images:botonDineromail-inmediato.jpg']}" />
                            </p:commandLink>
                    </p:dialog>

                </h:form>
                </div>

                <p:outputPanel id="dm" >
                    <form id="dmForm" action='https://argentina.dineromail.com/Shop/Shop_Ingreso.asp' method='post'>
                        <input type='hidden' name='NombreItem' value='#{destacarBean.descripcion}'/>
                        <input type='hidden' name='TipoMoneda' value='1'/>
                        <input type='hidden' name='PrecioItem' value='#{destacarBean.precio}'/>
                        <input type='hidden' name='E_Comercio' value='2421574'/>
                        <input type='hidden' name='NroItem' value='#{destacarBean.pagoId}'/>
                        <input type='hidden' name='DireccionExito' value='http://localhost.com:8080/AlquilaCosas-war/vistas/usuario/articulos.jsf'/>
                        <input type='hidden' name='DireccionFracaso' value='http://localhost.com:8080/AlquilaCosas-war/vistas/usuario/articulos.jsf '/>
                        <input type='hidden' name='DireccionEnvio' value='0'/>
                        <input type='hidden' name='Mensaje' value='0'/>
                        <input type='hidden' name='MediosPago' value='4,2,7,13'/>
                    </form>
                </p:outputPanel>

            </ui:define>

        </ui:composition>

    </body>
</html>
